<template>
  <div id="bigk" class="min-h-screen">
    <h1>
      <img src="/大标题.png" alt="" />
    </h1>
    <div id="b1" class="content-start">
      <div id="b11" class="content-start">
        <small-title :item="title1"></small-title>
        <!-- <div v-for="doc in docs" :key="doc.id">{{ doc.title }}</div> -->
        <single-line-diagram
          :dataset="singlelinedata"
          :newOption="singlelineoption"
        ></single-line-diagram>
      </div>
      <div id="b12" class="content-start">
        <small-title :item="title2"></small-title>
        <terrible-echart
          :dataset="bar1data"
          :newOption="bar1option"
        ></terrible-echart>
      </div>
      <div id="b13" class="content-start">
        <small-title :item="title3"></small-title>
        <scary-table
          :inform="peoplelist"
          :keyvalue="peoplekeyvalue"
        ></scary-table>
        <!-- <div
          class="tablecontainer flex justify-center overflow-auto"
          :style="{ height: '290px', width: '450px' }"
        >
          <table>
            <thead>
              <tr :style="{ background: '#223C83' }" class="sticky top-0">
                <th :style="{ color: '#AAB6FF' }">照片</th>
                <th :style="{ color: '#6EE7B7' }">姓名</th>
                <th :style="{ color: '#FCD34D' }">性别</th>
                <th :style="{ color: '#2ad0ff' }">时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in peoplelist" :key="person.name">
                <td>
                  <div class="flex justify-center">
                    <img src="/car_icon.png" alt="" />
                  </div>
                </td>
                <td :style="{ color: '#6EE7B7' }">{{ person.name }}</td>
                <td :style="{ color: '#FCD34D' }">{{ person.gender }}</td>
                <td :style="{ color: '#2ad0ff' }">{{ person.time }}</td>
              </tr>
            </tbody>
          </table>
        </div> -->
      </div>
    </div>
    <div id="b2">
      <div id="b21">
        <cool-button
          v-for="button in buttonset"
          :key="button.name"
          :item="button"
        ></cool-button>
      </div>
      <img id="b22" class="map justify-self-center" src="/map.png" alt="" />
      <div id="b23" class="">
        <div class="c1">
          <small-title :item="title4"></small-title>
          <pie-diagram
            :dataset="pie1data"
            :newOption="pie1option"
          ></pie-diagram>
        </div>
        <div class="c2">
          <small-title :item="title5"></small-title>
          <pie-diagram
            :dataset="pie2data"
            :newOption="pie2option"
          ></pie-diagram>
        </div>
        <div class="c3">
          <small-title :item="title6"></small-title>
          <pie-diagram
            :dataset="pie3data"
            :newOption="pie3option"
          ></pie-diagram>
        </div>
      </div>
    </div>
    <div id="b3">
      <div id="b31" class="overflow-hidden">
        <small-title :item="title7"></small-title>
        <double-line-diagram
          :dataset="doublelinedata"
          :newOption="doublelineoption"
        ></double-line-diagram>
      </div>
      <div id="b32">
        <small-title :item="title8"></small-title>
        <terrible-echart
          :dataset="bar2data"
          :newOption="bar2option"
        ></terrible-echart>
      </div>
      <div id="b33">
        <small-title :item="title9"> </small-title>
        <scary-table :inform="carlist" :keyvalue="carkeyvalue"></scary-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import CoolButton from 'S/comp/CoolButton.vue'
import SmallTitle from 'S/comp/SmallTitle.vue'
import ScaryTable from 'S/comp/ScaryTable.vue'
import TerribleEchart from 'S/comp/TerribleEchart.vue'
import SingleLineDiagram from 'S/comp/SingleLineDiagram.vue'
import DoubleLineDiagram from 'S/comp/DoubleLineDiagram.vue'
import PieDiagram from 'S/comp/PieDiagram.vue'
// const docs = ref([])
// onMounted(() => {
//   const result = fetch(
//     'https://xiafeng.co/manuscript/service/memos?keyword=&category=&pageNo=1'
//   )
//     .then((result) => {
//       return result.json()
//     })
//     .then((res) => {
//       console.log(res.docs)
//       docs.value = res.docs
//     })
// })
const title1 = ref({ src: './人员.png', text: '人员出入趋势' })
const title2 = ref({ src: './人员.png', text: '当日人员进出总量' })
const title3 = ref({ src: './人员.png', text: '人员出入实况' })
const title4 = ref({ src: './house.png', text: '住宅用途' })
const title5 = ref({ src: './fenbu.png', text: '居民年龄分布' })
const title6 = ref({ src: './send.png', text: '人员分布' })
const title7 = ref({ src: './car_icon.png', text: '车辆出入趋势' })
const title8 = ref({ src: './car_icon.png', text: '当日车辆进出总量' })
const title9 = ref({ src: './car_icon.png', text: '车辆出入实况' })
const pie1data = ref([
  { value: 170, name: '租赁' },
  { value: 830, name: '自住' },
])
const pie1option = ref({
  id: 'zhufangpie',
  isPercent: true,
})
const pie2data = ref([
  { value: 3842, name: '<18岁' },
  { value: 2761, name: '18-30岁' },
  { value: 5402, name: '31-50岁' },
  { value: 3842, name: '51-70岁' },
  { value: 2761, name: '>71岁' },
])
const pie2option = ref({
  id: 'nianlingpie',
  isPercent: false,
})
const pie3data = ref([
  { value: 75, name: '普通居民' },
  { value: 24, name: '党员' },
  { value: 1, name: '精神病人' },
])
const pie3option = ref({
  id: 'renyuanpie',
  isPercent: true,
})
const doublelinedata = ref({
  series1data: [6, 3, 9, 13, 5],
  series2data: [1, 8, 12, 5, 3],
  xvaluedata: ['0:00', '6:00', '12:00', '18:00', '24:00'],
})
const doublelineoption = ref({
  id: 'carmovingtrend',
  xAxisName: '时间',
  yAxisName: '车次',
  series1name: '进',
  series2name: '出',
})
const singlelinedata = ref([
  ['0:00', 6],
  ['6:00', 4],
  ['12:00', 12],
  ['18:00', 9],
  ['24:00', 13],
])
const singlelineoption = ref({
  id: 'peoplemovingtrend',
  xAxisName: '时间',
  yAxisName: '人员',
})
const bar1data = ref([
  ['北门', 55],
  ['南大门', 50],
  ['南小门', 53],
  ['正门', 52],
  ['东门', 57],
  ['西门', 59],
  ['西小门', 58],
])
const bar1option = ref({
  id: 'PersonRecord',
  xAxisName: '',
  yAxisName: '人员',
  isColorful: false,
})
const bar2data = ref([
  ['A区1通道', 55],
  ['A区2通道', 51],
  ['B区1通道', 61],
  ['B区2通道', 55],
  ['C区1通道', 50],
])
const bar2option = ref({
  id: 'CarRecord',
  xAxisName: '',
  yAxisName: '车次',
  isColorful: true,
})
const carlist = ref([
  {
    photo: '',
    name: '鲁A88888',
    type1: '进',
    time: '09:23:23',
  },
  {
    photo: '',
    name: '鲁A11557',
    type1: '出',
    time: '09:22:43',
  },
  {
    photo: '',
    name: '鲁D00009',
    type1: '出',
    time: '09:21:35',
  },
  {
    photo: '',
    name: '鲁A1A350',
    type1: '出',
    time: '09:20:57',
  },
  {
    photo: '',
    name: '鲁A55555',
    type1: '出',
    time: '09:17:24',
  },
])
const carkeyvalue = ref({
  name1: '照片',
  name2: '车牌',
  name3: '类别',
  name4: '时间',
  photo: './car_icon.png',
})
const peoplelist = ref([
  {
    photo: '',
    name: '聂安敬',
    type1: '男',
    time: '09:23:12',
  },
  {
    photo: '',
    name: '朴梁',
    type1: '男',
    time: '09:22:18',
  },
  {
    photo: '',
    name: '拓竹时',
    type1: '男',
    time: '09:21:16',
  },
  {
    photo: '',
    name: '袁红',
    type1: '女',
    time: '09:21:08',
  },
  {
    photo: '',
    name: '雷泰',
    type1: '男',
    time: '09:20:08',
  },
])
const peoplekeyvalue = ref({
  name1: '照片',
  name2: '姓名',
  name3: '性别',
  name4: '时间',
  photo: './人员.png',
})
const buttonset = ref([
  {
    src: './center_person.png',
    name: '人员',
    value: 12007,
    color: '#FF7E63',
  },
  {
    src: './center_car.png',
    name: '车辆',
    value: 2579,
    color: '#B6ADFF',
  },
  {
    src: './center_house.png',
    name: '房屋',
    value: 1800,
    color: '#62E0D7',
  },
  {
    src: './center_unit.png',
    name: '企业',
    value: 231,
    color: '#FEBE55',
  },
  {
    src: './center_monitor.png',
    name: '监控',
    value: 182,
    color: '#6AFF69',
  },
])
</script>

<style lang="postcss" scoped>
#bigk {
  background: radial-gradient(#01509f, #000c18);
  display: grid;
  width: 100%;
  grid:
    'a a a' 10%
    'b1 b2 b3' 1fr
    / 26.6% 45.5% 26.6%;
  column-gap: 10px;
}
#b1 {
  height: 100%;
  grid-area: b1;
  display: grid;
  grid:
    'b11' 27.2%
    'b12' 27.2%
    'b13' 1fr
    / auto;
  row-gap: 10px;
}
#b2 {
  grid-area: b2;
  display: grid;
  grid:
    'b21' 21.8%
    'b22' 47%
    'b23' 223px
    / auto;
  row-gap: 10px;
}
#b3 {
  grid-area: b3;
  display: grid;
  grid:
    'b31' 27.2%
    'b32' 27.2%
    'b33' 1fr
    / auto;
  row-gap: 10px;
}
#b11 {
  grid-area: b11;
  background-image: url('/左上角bg.png');
  /* background: center / contain no-repeat; */
  background-size: contain;
  background-repeat: no-repeat;
}
#b12 {
  grid-area: b12;
  background-image: url('/左上角bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
#b13 {
  grid-area: b13;
  background-image: url('/左下角bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
#b21 {
  display: grid;
  grid:
    'a1 a2 a3 a4 a5' auto
    / 20% 20% 20% 20% 20%;
  grid-area: b21;
  background-image: url('/中上bg.png');
  /* background: center / contain no-repeat; */
  background-size: contain;
  background-repeat: no-repeat;
}
.a1 {
  grid-area: a1;
  height: 55px;
  margin-top: 30px;
}
#b22 {
  grid-area: b22;
}
#b23 {
  grid-area: b23;
  display: grid;
  grid:
    'c1 c2 c3' auto
    / 33% 33% 33%;
  column-gap: 5px;
}
.c1 {
  grid-area: c1;
  background: url('/中间bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.c2 {
  grid-area: c2;
  background: url('/中间bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.c3 {
  grid-area: c3;
  background: url('/中间bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
#b31 {
  grid-area: b31;
  background-image: url('/左上角bg.png');
  /* background: center / contain no-repeat; */
  background-size: contain;
  background-repeat: no-repeat;
}
#b32 {
  grid-area: b32;
  background-image: url('/左上角bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
#b33 {
  grid-area: b33;
  background-image: url('/左下角bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}
h1 {
  display: grid;
  grid-area: a;
  justify-items: center;
  align-items: center;
}
.map {
  height: 350px;
}
/* td,
th {
  text-align: center;
  width: 25%;
}
table {
  margin-top: 18px;
  margin-right: 40px;
  width: 370px;
}
tr {
  height: 55px;
}
.tablecontainer::-webkit-scrollbar {
  display: none;
}
.tablecontainer {
  scrollbar-width: none;
  padding-top: 18px;
  padding-right: 40px;
} */
</style>
